<script setup name="choosesku">
import { reactive, ref } from "vue"
import { getSkusList } from "@/api/skus"
import { useInitTable } from "@/composables/useCommon"

// 显示规格选择弹框
const showDialog = ref(false)
// 当前选中规格id
const activeId = ref(0)
// 当前选中规格id对应的列表
const list = ref([])
// 传值回调
const callbackFunction = ref(null)

const { loading, currentPage, total, limit, tableData, getData } = useInitTable({
  getList: getSkusList,
  onGetList: res => {
    tableData.value = res.list
    total.value = res.totalCount
    if (tableData.value.length > 0) {
      handleChangeActiveId(tableData.value[0].id)
    }
  }
})
// 多选框
const form = reactive({
  list: [],
  name: ""
})

// 显示弹框
const open = (callback = null) => {
  callbackFunction.value = callback
  getData(1)
  showDialog.value = true
}
// 提交
const submit = () => {
  if (typeof callbackFunction.value === "function") {
    callbackFunction.value(form)
  }
  showDialog.value = false
}
// 关闭
const close = () => (showDialog.value = false)
// 当前选中规格
const handleChangeActiveId = id => {
  activeId.value = id
  list.value = []

  let item = tableData.value.find(v => v.id === id)
  if (item) {
    list.value = item.default.split(",")
    form.name = item.name
  }
}

// 导出方法
defineExpose({ open })
</script>

<template>
  <el-dialog class="choosesku-dialog" title="规格选择" v-model="showDialog" width="80%" top="5vh" destroy-on-close :close-on-click-modal="false" :show-close="false">
    <el-container class="choosesku-container">
      <el-aside width="220px" class="choosesku-container-aside">
        <div class="choosesku-container-aside-header">
          <div class="choosesku-container-aside-header-list" v-for="i in tableData" :key="i.id" :class="{ active: activeId === i.id }" @click="handleChangeActiveId(i.id)">
            {{ i.name }}
          </div>
        </div>
        <div class="choosesku-container-aside-footer">
          <el-pagination background small layout="prev, next" :total="total" :current-page="currentPage" :page-size="limit" @current-change="getData" />
        </div>
      </el-aside>
      <el-main>
        <el-checkbox-group v-model="form.list">
          <el-checkbox v-for="item in list" :key="item" :label="item" border>
            {{ item }}
          </el-checkbox>
        </el-checkbox-group>
      </el-main>
    </el-container>
    <div class="actions">
      <el-button type="primary" @click="submit">确定</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>
<stylel lang="scss" scoped>
.choosesku-dialog {
  .choosesku-container {
    height: 65vh;
    &-aside {
      position: relative;
      border: 1px solid var(--border);
      &-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 32px;
        overflow-y: auto;
        &-list {
          padding: 10px 6px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #f4f4f4;
          cursor: pointer;
          font-size: var(--text-sm);
          color: var(--gray500);
          &:hover {
            background-color: var(--bg2);
          }
          &.active {
            background-color: var(--bg2);
          }
        }
      }
      &-footer {
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        justify-content: center;
        align-items: center;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
  }
  .actions {
    margin-top: 20px;
    text-align: center;
  }
}
@media screen and (max-width: 375px), screen and (max-width: 414px) {
  .choosesku-dialog {
    min-width: 90% !important;
    .choosesku-container {
      &-aside {
        width: 28vw;
      }
    }
    .el-main {
      .el-checkbox {
        margin-bottom: 6px;
      }
    }
  }
}
</stylel>
